<template>
  <div class="manage-container">
    <el-menu :default-active="activeName" style="width:220px" @select="changemenu">
      <el-menu-item :index="'file'">
        <i class="el-icon-files"></i>
        <span slot="title">文件管理</span>
      </el-menu-item>
      <el-menu-item :index="'warn'">
        <i class="el-icon-message-solid"></i>
        <span slot="title">告警管理</span>
      </el-menu-item>
      <el-menu-item :index="'member'">
        <i class="el-icon-user-solid"></i>
        <span slot="title">成员管理</span>
      </el-menu-item>
      <el-menu-item :index="'streaming'">
        <i class="el-icon-s-cooperation"></i>
        <span slot="title">Streaming 任务</span>
      </el-menu-item>
      <el-menu-item :index="'branch'">
        <i class="el-icon-s-order"></i>
        <span slot="title">Batch 任务</span>
      </el-menu-item>
      <el-menu-item :index="'workflow'">
        <i class="el-icon-s-platform"></i>
        <span slot="title">Workflow 运行历史</span>
      </el-menu-item>
    </el-menu>
    <div class="main_content">
      <manage-file v-if="activeName === 'file'" />
      <manage-warn v-else-if="activeName === 'warn'" />
      <manage-member v-else-if="activeName === 'member'" />
      <manage-workflow v-else-if="activeName === 'workflow'"></manage-workflow>
      <manage-streaming v-else-if="activeName === 'streaming'"></manage-streaming>
      <manage-batch v-else-if="activeName === 'branch'"></manage-batch>
    </div>
  </div>
</template>
<script>
import manageFile from "./components/manage-file";
import manageWarn from "./components/manage-warn";
import manageMember from "./components/manage-member";
import manageWorkflow from "./components/manage-workflow";
import manageStreaming from "./components/manage-streaming";
import manageBatch from "./components/manage-batch";

export default {
  name: "Manage",
  components: {
    manageFile,
    manageWarn,
    manageMember,
    manageWorkflow,
    manageStreaming,
    manageBatch
  },
  props: {
    project_id: String
  },
  provide() {
    return {
      project_id: this.project_id
    };
  },
  data() {
    return {
      activeName: ""
    };
  },
  methods: {
    changemenu(item) {
      this.activeName = item;
      sessionStorage.setItem("idata_gnav", item);
    }
  },
  created() {
    this.activeName = sessionStorage.getItem("idata_gnav") || "file";
  }

};
</script>
<style lang="scss" scoped>
.manage-container {
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  display: flex;
  height: 100%;
  width: 100%;

  .main_content {
    width: calc(100% - 220px);
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
  }
}
</style>
